<template>
  <div v-if="previewImg === null">
    <el-image style="width: 100px; height: 100px" :src="imgUrl"
              :preview-src-list="previewImg" @click.stop="drawImg"
              fit="contain" :z-index="99999" :preview-teleported="true"/>
    <canvas ref="canvasRef" style="display: none;"></canvas>
  </div>
  <el-image v-else style="width: 100px; height: 100px" :src="previewImg"
            :preview-src-list="previewImg"
            fit="contain" :z-index="99999" :preview-teleported="true"/>
</template>
<script setup>

const props = defineProps({
  imgUrl: {
    type: String,
    default: function (){
      return "";
    }
  },
  data:{
    type: Object,
    default: {}
  }
})
const row = props.data;
const canvasRef = ref(null);
const imgRef = ref(null);
const previewImg = ref(null)
//画图
const drawImg = ()=> {
  const canvas = canvasRef.value;
  const ctx = canvas.getContext('2d');
  ctx.width = row.imgWidth;
  ctx.width = row.imageHeight;

  console.log(row.imgLocation)
  const imgLocation = JSON.parse(row.imgLocation);

  ctx.strokeStyle = '#e90a28';
  ctx.strokeRect(imgLocation.xmin, imgLocation.ymin, imgLocation.xmin, imgLocation.ymax);
  var dataURL = canvas.toDataURL('image/png');
  previewImg.value=dataURL;
  return;

  var img = new Image();
  img.crossOrigin = "Anonymous"; // 如果图片服务器支持CORS，设置这个属性
  img.src = row.picUrl;
  img.onload = function () {
     ctx.drawImage(img, 0, 0, ctx.width, ctx.height);

  };
}
</script>
